<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancelDialog" :width="width" :close-on-click-modal="modalClose">
    <slot></slot>
    <div slot="footer" class="dialog-footer">
      <el-checkbox v-model="isClose" style="margin-right: 32px">保存后是否关闭弹窗</el-checkbox>
      <el-button @click="cancelDialog">取消</el-button>
      <el-button @click="resetDialog">重置</el-button>
      <el-button type="primary" @click.stop="submitForm()">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    data(){
      return {
        dialogFormVisible: false,
        isClose: false
      };
    },
    props: {
      title: {
        type: String
      },
      value: {
        type: Boolean
      },
      width: {
        type: String
      },
      modalClose: {
        type: Boolean,
        default: false
      }
    },
    methods:{
      cancelDialog(){
        this.dialogFormVisible = false;
        this.$emit('input', false);
        this.$emit('cancelDialog');
      },
      resetDialog(){
        this.$emit('resetDialog');
      },
      submitForm(){
        let _this = this;
        this.$emit('submitForm', function(flag){
            if (flag && _this.isClose) {
              _this.cancelDialog();
            }
        });
      }
    },
    watch:{
      value(val){
        this.dialogFormVisible = val;
      }
    }
  }
</script>
<style>
  .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #606266;
  }
</style>
